<template>
    <div class="container">
        <Form :model="formTop" label-position="top">
        <div class="title">
            <div class="sub-title">
                <span>中转人员基本信息</span>
                <div class="group">
                    <Input search placeholder="请输入身份证号" v-model="formTop.input0" style="width: 280px;"/>
                    <div class="history">查看数据库 <Icon type="md-link" /></div>
                </div>
            </div>
        </div>
        <div class="sub-content">
            <Row :gutter="20">
                <Col span="8">
                    <FormItem label="姓名">
                        <Input v-model="formTop.input1"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="性别">
                        <Select v-model="model1" style="width:100%">
                            <Option v-for="item in sexType" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="年龄">
                        <Input v-model="formTop.input2"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="证件类型">
                        <Select v-model="model1" style="width:100%">
                            <Option v-for="item in cardType" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="证件号码">
                        <Input v-model="formTop.input3"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="联系电话">
                        <Input v-model="formTop.input4"></Input>
                    </FormItem>
                </Col>
            </Row>
        </div>
        <div class="title">
            <div class="sub-title"><span>中转信息</span></div>
        </div>
        <div class="sub-content">
            <Row :gutter="20">
                <Col span="8">
                    <FormItem label="离沈时间">
                        <DatePicker type="date" placeholder="Select date" style="width: 100%"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="离沈去向">
                        <Select v-model="model1" style="width:100%">
                            <Option v-for="item in whereType" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="目的地城市">
                        <Select v-model="model1" style="width:100%">
                            <Option v-for="item in whereType" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="6">
                    <FormItem label="离沈方式">
                        <Select v-model="awType" style="width:100%">
                            <Option v-for="item in awayType" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="6">
                    <FormItem label="离沈交通工具班次(车次)">
                        <Input v-model="formTop.input8"></Input>
                    </FormItem>
                </Col>
                <Col span="6">
                    <FormItem label="机舱等级(车厢号/车牌号)">
                        <Input v-model="formTop.input8"></Input>
                    </FormItem>
                </Col>
                <Col span="6">
                    <FormItem label="座位号">
                        <Input v-model="formTop.input8"></Input>
                    </FormItem>
                </Col>
            </Row>
        </div>
            <div class="btn-op">
                <Button type="warning">提交信息</Button>
            </div>
        </Form>
    </div>
</template>

<script>
export default {
  data () {
    return {
      formTop: {
        input0: '请输入身份证号',
        input1: '',
        input2: '',
        input3: '',
        input4: ''
        // input5: '',
        // input6: '',
        // input7: '',
        // input8: '',
        // input9: '',
        // input10: '',
        // input11: '',
        // input12: '',
        // input13: '',
        // input14: '',
        // input15: '',
        // input16: '',
        // input17: '',
        // input18: ''
      },
      whereType: [
        {
          value: '辽宁',
          label: '辽宁'
        },
        {
          value: '吉林',
          label: '吉林'
        }
      ],
      awayType: [
        {
          value: '飞机',
          label: '飞机'
        },
        {
          value: '火车',
          label: '火车'
        },
        {
          value: '转运车',
          label: '转运车'
        }
      ],
      cardType: [
        {
          value: '身份证',
          label: '身份证'
        },
        {
          value: '护照',
          label: '护照'
        },
        {
          value: '港澳台通行证',
          label: '港澳台通行证'
        }
      ],
      planParkList: [
        {
          value: '首都机场',
          label: '首都机场'
        },
        {
          value: '桃仙',
          label: '桃仙'
        }
      ],
      sexType: [
        {
          value: '男',
          label: '男'
        },
        {
          value: '女',
          label: '女'
        }
      ],
      cityList: [
        {
          value: '沈阳',
          label: '沈阳'
        },
        {
          value: '大连',
          label: '大连'
        }
      ],
      countryList: [
        {
          value: '美国',
          label: '美国'
        },
        {
          value: '意大利',
          label: '意大利'
        },
        {
          value: '日本',
          label: '日本'
        }
      ]
    }
  }
}
</script>

<style scoped>
    .title {
        padding: 20px 0;
        border-bottom: 1px solid #efefef;
    }
    .sub-title {
        border-left: 7px solid darkred;
        font-size: 18px;
        font-weight: 700;
        padding-left: 10px;
        display: flex;
        justify-content: space-between;
    }
    .sub-content {
        border: 10px solid #efefef;
        padding: 20px 20px 0 20px;
    }
    .btn-op {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }
    .history {
        color: darkred;
        display: flex;
        align-items: center;
        margin-left: 10px;
        font-size: 12px;
    }
    .group {
        display: flex;
    }
</style>
